<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>综合查询</el-breadcrumb-item>
            <el-breadcrumb-item>用户画像</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="10">
                    <div>
                    <el-input placeholder="请输入内容"  v-model="queryParam.query">
                        <el-button slot="append" icon="el-icon-search" @click="getuserPicList"></el-button>
                    </el-input>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div>
                    <el-button type="primary" disabled @click="dialogVisible = true">添加微信用户</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card>

        <el-table
                :data="this.userPicList"
                border
                stripe
                style="width: 100%">
                <el-table-column
                type="index"
                label="#">
                </el-table-column>
                <el-table-column
                prop="id"
                label="用户ID">
                </el-table-column>
                <el-table-column prop="nickname" label="微信昵称">
                </el-table-column>
                <el-table-column prop="avatar" label="微信头像">
                    <template slot-scope="scope">
                            <el-image
                            style="width: 80px; height: 80px"
                            :src="scope.row.avatar"
                            fit="fill">
                            </el-image>
                    </template>
                </el-table-column>
                <el-table-column
                prop="name"
                label="姓名">
                </el-table-column>
                <el-table-column
                prop="mobile"
                label="手机号码">
                </el-table-column>
                <el-table-column
                prop="birthday"
                label="出生日期">
                </el-table-column>
                <el-table-column prop="gender" label="性别">
                    <template slot-scope="scope">
                        <el-tag v-if ="scope.row.gender == '1'" type=""  effect="dark">男</el-tag>
                        <el-tag v-if ="scope.row.gender == '2'" type="danger" effect="dark">女</el-tag> 
                    </template>
                </el-table-column>
                <el-table-column
                prop="idCard"
                label="身份证">
                </el-table-column>
                <el-table-column
                prop="height"
                label="身高(CM)">
                </el-table-column>
                <el-table-column
                prop="weight"
                label="体重(KG)">
                </el-table-column>
                <el-table-column
                prop="weixinOpenid"
                label="OpenId">
                </el-table-column>
                <el-table-column
                prop="lastLoginTime"
                label="上次登录时间">
                </el-table-column>
            </el-table>
        </el-card>
        <el-card>
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.number"
                :page-sizes="[1, 2, 3, 5,10]"
                :page-size="queryParam.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import Qs from 'qs'
import axios from 'axios'
export default {
    data(){
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
            callback(new Error('请再次输入密码'));
            } else if (value !== this.userForm.password) {
            callback(new Error('两次输入密码不一致!'));
            } else {
            callback();
            }
        };
        return{
            queryParam:{
                query:"",
                number: 1,
                size: 5
            },
            userPicList:[],
            total:0,
            dialogVisible: false,
            dialogEditVisible: false,
            GymInfo:{
                name:"",
                contact:"",
                address:"",
                location:"",
                introduction:"",
                tags: "",
                facility:"",
                service:"",
                traffic:"",
                enabled:""
            },
            total:0, 
            sizes:1, 
            prev:true, 
            pager:10, 
            next:true, 
            jumper:true,
            gymInfo:{
              id:"",
              status:"",
            },
        };
    },
    created(){
        this.getuserPicList()
    },
    methods:{
        async getuserPicList(){
            this.$axios.post(
                'wx/user/list',this.queryParam,
                {
                    headers:{
                        'Authorization': window.sessionStorage.getItem('token')
                    }
                }
            )
            .then(res=>{
                console.log('小程序列表请求成功',res.data.data.data)
                this.total = res.data.data.totalElements;
                this.pager = res.data.data.totalPages;  
                this.size =  res.data.data.size;
                this.prev =  res.data.data.hasPrevious;
                this.next =  res.data.data.hasNext;
                this.userPicList = res.data.data.data;
            })
            .catch(Error=>{
                console.log('小程序请求失败',Error)
            })
        },
        handleSizeChange(val){
            this.queryParam.size = val
            this.getuserPicList()
        },
        handleCurrentChange(val){
            this.queryParam.number = val
            this.getuserPicList()
        },
        //清空表单
        ReSetDialog(){
            this.$refs.userFormruleForm.resetFields()
        },
        GetGymInfo(gymId){
            //在需要的事件中直接使用
            axios.get(
                `wx/user/list`,
                {
                    headers:{
                        'Authorization': window.sessionStorage.getItem('token')
                    }
                }
            )
            .then(res=>{
                console.log('请求成功',res)
                if(res.status==200){
                    this.gymInfo = res.data.data
                    this.dialogEditVisible = true
                }
                else{
                    this.$message.error(res.data)
                }
            })
            .catch(Error=>{
                console.log('请求失败',Error)
            })
        },
        EditUser(){
            this.$refs.gymInfoFormruleForm.validate(async valid=>{
                if(!valid) return; 

                const{data:res} = await this.$http.put(`users/`+this.gymInfo.userid,this.gymInfo)
                if(res.meta.status !== 200){
                    this.$message.error(res.meta.msg)
                }
                else{
                    this.$message.success('修改成功');
                    this.dialogEditVisible = false;
                    this.getuserPicList()
                }
            })
        },
        dialogEditClose(){
            this.$refs.gymInfoFormruleForm.resetFields();
        },
        DelGym(gymInfo){
                this.$confirm(`是否确认删除【${gymInfo.name}】,请确认?`, '是否继续', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(
                async () => {
                    const{data:res} =await this.$http.delete('users/'+gymInfo.id);
                        if(res.meta.status!==200) {
                            this.$message.error(res.meta.msg)
                        }else{
                            this.$message.success(res.meta.msg)
                            this.getScheduleList()
                        }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                        });          
                });
        }
    },
}
</script>

<style lang="less" scoped>
  .el-breadcrumb{
      margin-bottom: 10px;
      font-size: 14px;
  }
  .el-table-column{
      text-align: center;
  }
  .el-pagination{
      text-align: left;
  }
  .el-form-item{
      margin-right: 50px;
  }
</style>